<template>
  <div class="categray">
    <header class="header wrap van-hairline--bottom">
      <van-icon class="icon" name="cluster-o" />
      <div class="header-search">
        <van-icon name="search" />
        <router-link tag="span" class="search-title" to="./shoplist?from=category">全场50元起步</router-link>
      </div>
      <i class="iconfont icon-More"></i>
    </header>
    <div class="search-wrap" ref="searchWrapRef">
      <ListScroll :scroll-data="categorys" class="nav-side-wrapper">
        <ul class="nav-side">
          <li
            v-for="item in categorys"
            :key="item.categoryId"
            v-text="item.categoryName"
            :class="{'active': currentIndex == item.categoryId}"
            @click="selectItem(item.categoryId)"
          />
        </ul>
      </ListScroll>
      <div class="search-content">
        <ListScroll :scroll-data="categorys" >
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <template v-for="(category, index) in categorys">
                <div class="swiper-slide" v-if="currentIndex == category.categoryId" :key="index">
                  <div class="category-list" v-for="(products, index) in category.secondLevelCategoryVOS" :key="index">
                    <p class="catogory-title">{{products.categoryName}}</p>
                    <div class="product-item" v-for="(product, index) in products.thirdLevelCategoryVOS" :key="index" @click="selectProduct(product)">
                      <img src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" class="product-img"/>
                      <p v-text="product.categoryName" class="product-title"></p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </ListScroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, defineAsyncComponent} from 'vue'
import {useRouter} from 'vue-router'
import {Toast} from 'vant'
import {getCategory} from '@/service/shop'

const ListScroll = defineAsyncComponent(() => import('@/components/ListScroll'))

const router = useRouter()

const searchWrapRef = ref(null)
const categorys = ref([])
const currentIndex = ref(15)

onMounted(async () => {
  Toast.loading('加载中...')
  const {data, resultCode} = await getCategory()
  if (resultCode !== 200) return
  categorys.value = data
})

function selectItem(id) {
  currentIndex.value = id
}
function selectProduct(item) {
  router.push({path: '/shoplist', query: {categoryId: item.categoryId}})
}
</script>

<style lang="less" scoped>
@import '@/assets/style/var.less';
@import '@/assets/style/mixin.less';

.categray {
  .header {
    background: @background;
    position: fixed;
    left: 0;
    top: 0;
    .fj();
    .wh(100%, 50px);
    display: flex;
    align-items: center;
    line-height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 15px;
    color: #656771;
    z-index: 10000;
    &.active {
      background: @primary;
    }
    .icon {
      margin: 5px;
    }
    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }
    .header-search {
      display: flex;
      width: 80%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px;
      color: #232326;
      background: #F7F7F7;
      border-radius: 20px;
      .nbSearch {
        padding: 0 10px 0 20px;
        font-size: 17px;
      }
      .search-title {
        font-size: 12px;
        color: @color-text-l;
        line-height: 21px;
        margin-left: 8px;
      }
    }
    .icon-More {
      font-size: 20px;
    }
  }
}
.search-wrap {
  .fj();
  width: 100%;
  height: calc(100vh - 50px);
  margin-top: 50px;
  background: #F8F8F8;
  .nav-side-wrapper {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 9;
    width: 28%;
    height: 100%;
    overflow: hidden;
    .nav-side {
      width: 100%;
      .boxSizing();
      background: #F8F8F8;
      li {
        width: 100%;
        height: 56px;
        text-align: center;
        line-height: 56px;
        font-size: 14px;
        &.active {
          color: @primary;
          background: @background;
        }
      }
    }
  }
  .search-content {
    width: 72%;
    height: 100%;
    padding: 0 10px;
    background: @background;
    overflow-y: scroll;
    touch-action: pan-y;
    margin-left: 28%;
    * {
      touch-action: pan-y;
    }
    .boxSizing();
    .swiper-container {
      width: 100%;
      .swiper-slide {
        width: 100%;
        .category-main-img {
          width: 100%;
        }
        .category-list {
          display: flex;
          flex-wrap: wrap;
          flex-shrink: 0;
          width: 100%;
          .catogory-title {
            width: 100%;
            font-size: 17px;
            font-weight: 500;
          }
          .product-item {
            width: 33.3333%;
            margin-bottom: 10px;
            text-align: center;
            font-size: 15px;
            .product-img {
              .wh(30px, 30px);
            }
          }
        }
      }
    }
  }
}
</style>